<script setup lang="ts">
import UserIcon from "@/components/icons/user-icon.vue";
import PasswordIcon from "@/components/icons/password-icon.vue";

import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { login } from "@/api/module/auth.api.ts";
import { useRequest } from "@/api/utils.ts";
import { useUserStore } from "@/store";

import formRules from "./form-rules.ts";
import { HOME_ROUTE_NAME } from "@/router/routes/home.route.ts";

import type { FormInst } from "naive-ui";

const router = useRouter();
const userStore = useUserStore();

const formRef = ref<FormInst>();
const formData = reactive({
    username: "",
    password: ""
});

const { response, request } = useRequest(login);

function handleLogin() {
    formRef.value!.validate(errors => {
        if (!errors) {
            request({
                username: formData.username,
                password: formData.password
            }).then(res => {
                // 临时保存用户信息, 这里不保存也可以, 如果没有保存则在路由守卫中会自动拉取
                userStore.updateUser(res);
                router.push({ name: HOME_ROUTE_NAME });
            });
        }
    });
}

</script>

<template>
    <div class="h-full flex flex-col items-center justify-center px-10">
        <!-- 顶部Logo信息 -->
        <div class="p-4">
            <img src="/logo.svg" alt="logo" class="logo">
        </div>

        <!-- 登录表单 -->
        <n-form
            ref="formRef"
            class="w-full"
            :model="formData"
            :rules="formRules"
            :show-label="false"
            :disabled="response.waiting"
        >
            <!-- 用户名 -->
            <n-form-item path="username">
                <n-input v-model:value="formData.username" size="large" placeholder="用户名">
                    <template #prefix>
                        <n-icon :size="22" class="mr-1"><user-icon/></n-icon>
                    </template>
                </n-input>
            </n-form-item>
            <!-- 密码 -->
            <n-form-item path="password">
                <n-input v-model:value="formData.password" size="large" placeholder="密码" type="password" @keydown.enter="handleLogin">
                    <template #prefix>
                        <n-icon :size="22" class="mr-1"><password-icon/></n-icon>
                    </template>
                </n-input>
            </n-form-item>
            <!-- 登录 -->
            <n-form-item>
                <n-button
                    block
                    size="large"
                    type="primary"
                    :loading="response.waiting"
                    @click="handleLogin"
                >登 录</n-button>
            </n-form-item>
        </n-form>
    </div>
</template>

<style scoped>
.logo {
    @apply inline-block w-28 relative;

    animation: logo-shadow 1500ms ease forwards;
}
@keyframes logo-shadow {
    0% {
        top: 0;
        filter: drop-shadow(0 0 0em rgba(255, 222, 222, 0.2));
    }
    100% {
        top: -50px;
        filter: drop-shadow(0 0 6em rgba(255, 222, 222, 1));
    }
}

</style>